.search-container {
  background: #fff;

  &.list-background {
    background: transparent;
  }

  .search-block {
    @include flex;
    @include a-center;
    padding: 15rpx 32rpx;
    background: #fff;
    // border-bottom: 1px solid #EFEFEF;
    z-index: 9;
    position: relative;

    .search-left {
      @include sub-item;
    }

    .layout-icon {
      width: 40rpx;
      height: 40rpx;
      margin-left: 24rpx;
    }

    .back-btn {
      color: #000;
      font-size: 30rpx;
      margin-left: 10rpx;
      padding-left: 14rpx;
    }
  }

  .keyword-block {
    padding: 40rpx 32rpx 0;

    .block-title {
      @include flex;
      @include a-center;
      color: #1C1C1C;
      font-size: 28rpx;

      .sub-item {
        @include sub-item;
        padding-left: 10rpx;
      }

      .icon {
        width: 28rpx;
        height: 28rpx;
      }
    }

    .keyword-item {
      @include text-ellipsis;

      color: #000;
      font-size: 24rpx;
      padding: 0 20rpx;
      text-align: center;
      width: 214rpx;
      line-height: 60rpx;
      background: #F5F5F5;
      display: inline-block;
      margin-right: 20rpx;
      margin-top: 20rpx;
      box-sizing: border-box;
      border-radius: 4rpx;

      &.active {
        color: #E21536;
      }

      &:nth-child(3n) {
        margin-right: 0;
      }

      // color: #000;
      // font-size: 24rpx;
      // text-align: center;
      // padding: 0 20rpx;
      // line-height: 54rpx;
      // border: 1px solid #000;
      // border-radius: 28rpx;
      // display: inline-block;
      // margin: 20rpx 25rpx 0 0;
    }

    // &.hot{
    //   .keyword-item{
    //     color: #FF53A9;
    //     border: 1px solid #FF8FB0;
    //     position: relative;

    //     .icon{
    //       width: 56rpx;
    //       height: 56rpx;
    //       top: -6rpx;
    //       left: 0;
    //       position: absolute;
    //       z-index: 1;
    //     }
    //   }
    // }
  }

  .keyword-suggest-list {
    .keyword-item {
      color: #C5C5C5;
      font-size: 28rpx;
      line-height: 86rpx;
      padding: 0 32rpx;
      border-bottom: 1px solid #E8E7EA;

      .fontBold {
        color: #000;
      }
    }
  }

  .goods-list {
    padding: 10rpx 0 120rpx;

    &.horizontal {
      .goods-item-container {
        padding: 20rpx;
        //border-radius: 10rpx;
        overflow: hidden;
        background: #fff;
        // box-shadow: 0 10rpx 10rpx 0 rgba(153, 174, 223, 0.1);
        margin-bottom: 16rpx;

        .goods-name {
          color: #000;
          font-weight: 400;
        }
      }
    }

    &.vertical {
      .goods-item-container {
        padding: 10rpx;
        width: 50%;
        box-sizing: border-box;
        display: inline-block;
      }

      .goods-item {
        // border-radius: 10rpx;
        overflow: hidden;
        background: #fff;
        // box-shadow: 0 10rpx 10rpx 0 rgba(153, 174, 223, 0.1);

        .goods-detail {
          padding: 0 18rpx 24rpx;

          .block-down {
            @include center;

            .goods-price {
              font-size: 28rpx;
              font-weight: bold;
            }

            .market-price {
              display: none;
            }
          }
        }
      }
    }

  }

  .tk-goods-list {
    .goods-item-container {
      @include flex;
      @include j-between;
      padding: 30rpx;
      background-color: #fff;
      // border-radius:20rpx;
      margin-bottom: 20rpx;
    }

    .goods-pic {
      width: 260rpx;
      height: 260rpx;
      border-radius: 16rpx;
      overflow: hidden;
      @include flex-item;
    }

    .goods-info {
      @include sub-item;
      padding-left: 20rpx;
      @include flex(column);
      justify-content: space-between;
    }

    .goods-title {
      font-size: 26rpx;
      color: #000;
      line-height: 40rpx;
      @include text-ellipsis-line;

      .platform {
        color: #FFF;
        font-size: 18rpx;
        line-height: 28rpx;
        border-radius: 5rpx;
        padding: 0 4rpx;
        margin-right: 8rpx;
        vertical-align: middle;
        display: inline-block;
        background: #F20219;

        &.platform-VOP {
          background: #E1017E;
        }
      }
    }

    .goods-sales {
      font-size: 24rpx;
      color: rgba(153, 153, 153, 1);
      line-height: 30rpx;
    }

    .goods-coup {
      font-size: 0;
      min-height: 30rpx;
      @include flex;
      @include a-center;
    }

    .coupon {
      color: #fff;
      font-size: 24rpx;
      line-height: 36rpx;
      display: inline-block;
      padding: 0 10rpx 0 20rpx;
      // background: #F20219;
      background-size: 100% 100%;
      margin: 0 10rpx 0 12rpx;
      position: relative;
    }

    .goods-coup-price-tip {
      background: rgba(255, 255, 255, 1);
      border: 1rpx solid rgba(242, 2, 25, 1);
      border-radius: 5rpx;
      font-size: 20rpx;
      color: rgba(242, 2, 25, 1);
      padding: 4rpx 10rpx;
      display: block;
    }

    .goods-price {
      font-size: 0;
      @include flex;
    }

    .goods-price-num {
      font-size: 28rpx;
      font-weight: bold;
      color: rgba(242, 2, 25, 1);
      line-height: 30rpx;

      &::before {
        content: '￥';
        display: inline-block;
        font-size: 20rpx;
        color: rgba(242, 2, 25, 1);
        font-weight: bold;
      }
    }

    .goods-price-tip {
      font-size: 20rpx;
      font-weight: bold;
      color: rgba(242, 2, 25, 1);
      display: inline-block;
      line-height: 32rpx;
      margin-left: 8rpx;
    }

    .goods-type {
      @include flex;
      @include a-center;
    }

    .goods-type-icon {
      width: 30rpx;
      height: 30rpx;
      margin-right: 8rpx;
      display: block;
    }

    .goods-type-txt {
      font-size: 24rpx;
      color: rgba(153, 153, 153, 1);
      // line-height:30rpx;
    }

    .other {
      @include flex;
      @include j-between;
      color: #999;

      .month-sales {
        @include text-ellipsis;
      }

      .original-price {
        text-decoration: line-through;
      }
    }

    &.vertical {
      padding: 10rpx;

      .layout {
        padding: 10rpx;
        width: 50%;
        display: inline-block;
        box-sizing: border-box;
      }

      .goods-item-container {
        @include flex(column);
        margin: 0;
        padding: 24rpx;
      }

      .goods-pic {
        width: 280rpx;
        height: 280rpx;
        margin: 0 auto;

        b-image {
          width: 280rpx;
          height: 280rpx;
        }
      }

      .goods-info {
        @include sub-item(1, column);
        padding-left: 0;
      }

      .goods-coup {
        margin: 12rpx 0;
      }
    }
  }

  .optionProduct {
    position: fixed;
    bottom: -20rpx;
    width: 100%;
    height: 150rpx;
    background-color: #fff;
  .btnBox {
    width: 100%;
    height: 100rpx;
    line-height: 150rpx;
  }
  }
  .leftContent {
    float: left;
    padding: 0 40rpx;
    font-weight: 700;
  }
  .rightBtn {
    float: right;
      width: 450rpx !important;
      height: 60rpx !important;
      line-height: 60rpx;
      font-size: 28rpx;
      margin-top: 75rpx;
      margin-right: 40rpx;
      transform: translateY(-50%);
      background-color: #FE759F !important;
  }
  .rightBtnColor {
    background-color:#999999!important;
  }
}